<template>
  <div class="game-option">
    <div class="card-change">
      <el-radio-group v-model="isRace" @change="handleChange">
        <el-radio-button :label="`${raceScheduleId} + 1`"
          >比赛数据</el-radio-button
        >
        <el-radio-button :label="`${raceScheduleId} + 2`"
          >比赛名单</el-radio-button
        >
      </el-radio-group>
    </div>
    <el-divider border-style="dotted" />
    <GameStep
      v-if="isRace === `${raceScheduleId} + 1`"
      :homeDataList="homeDataList"
      :awayDataList="awayDataList"
    />
    <GameList
      v-if="isRace === `${raceScheduleId} + 2`"
      :gameDataList="gameDataList"
    />
  </div>
</template>

<script lang="ts" setup>
import GameStep from "./gameStep.vue";
import GameList from "./gameList.vue";
import { ref } from "vue";
import { getRacePlayerData, getRacePlayerList } from "@/api/match";

const props = defineProps<{
  raceScheduleId?: number;
  homeTeamId?: number;
}>();

const isRace = ref<string>("");
const gameDataList = ref([]);
const homeDataList = ref([]);
const awayDataList = ref([]);

const handleChange = async (value: string) => {
  if (value == `${props.raceScheduleId} + 1`) {
    const res = await getRacePlayerData({
      raceScheduleId: props.raceScheduleId,
    });
    res.data.map((item: any) => {
      if (item.teamId === props.homeTeamId) {
        homeDataList.value = item.racePlayerDataInfoList;
      } else {
        awayDataList.value = item.racePlayerDataInfoList;
      }
    });
  } else {
    const resl = await getRacePlayerList({
      raceScheduleId: props.raceScheduleId,
    });
    gameDataList.value = resl.data;
  }
};
</script>

<style lang="scss" scoped>
.game-option {
  .card-change {
    display: flex;
    justify-content: center;
  }
}
</style>